<template>
    <view class="container">
        <!-- 自定义导航栏 -->
        <custom-navbar :showTitle="true" :isCoverNav="false" backgroundColor="transparent" textColor="#ffffff" :showBack="true"></custom-navbar>
        <!-- 标题栏 -->
        <!-- <view class="header">
            <text class="title">服务协议</text>
        </view> -->
        
        <!-- Tabs切换 -->
        <view class="tabs" ref="tabsRef">
            <view 
                class="tab-item" 
                :class="{ active: activeTab === 'user' }"
                @tap="switchTab('user')"
            >
                用户协议
            </view>
            <view 
                class="tab-item" 
                :class="{ active: activeTab === 'privacy' }"
                @tap="switchTab('privacy')"
            >
                隐私协议
            </view>
        </view>
        
        <!-- 协议内容 -->
        <scroll-view class="content" scroll-y="true" :style="{ height: contentHeight + 'px' }">
            <!-- 用户协议内容 -->
            <view v-if="activeTab === 'user'" class="agreement-content">
                <view class="section">
                    <text class="section-title">1. 服务条款的确认和接纳</text>
                    <text class="section-content">
                        欢迎使用我们的民宿预订服务！本用户协议（以下简称"协议"）是您与我们之间关于使用本服务的法律协议。当您注册、访问或使用我们的服务时，即表示您已阅读、理解并同意受本协议的约束。
                    </text>
                </view>
                
                <view class="section">
                    <text class="section-title">2. 服务说明</text>
                    <text class="section-content">
                        我们提供民宿预订平台服务，为用户提供民宿信息查询、在线预订、支付等功能。我们致力于为用户提供优质、便捷的住宿预订体验。
                    </text>
                </view>
                
                <view class="section">
                    <text class="section-title">3. 用户注册与账户</text>
                    <text class="section-content">
                        3.1 用户需要提供真实、准确、完整的个人信息进行注册。\n
                        3.2 用户有责任维护账户安全，不得将账户借给他人使用。\n
                        3.3 如发现账户被盗用，请立即联系我们。
                    </text>
                </view>
                
                <view class="section">
                    <text class="section-title">4. 预订与支付</text>
                    <text class="section-content">
                        4.1 用户在预订时需要提供准确的入住信息。\n
                        4.2 预订确认后，用户需要按照约定时间完成支付。\n
                        4.3 支付成功后，预订即生效，用户将收到确认信息。
                    </text>
                </view>
                
                <view class="section">
                    <text class="section-title">5. 取消与退款</text>
                    <text class="section-content">
                        5.1 用户可以根据民宿的取消政策申请取消预订。\n
                        5.2 退款将根据具体的取消政策和时间进行处理。\n
                        5.3 特殊情况下的退款将根据实际情况协商处理。
                    </text>
                </view>
                
                <view class="section">
                    <text class="section-title">6. 用户行为规范</text>
                    <text class="section-content">
                        6.1 用户应当遵守法律法规，不得利用本服务从事违法活动。\n
                        6.2 用户应当文明使用服务，不得发布虚假信息或恶意评价。\n
                        6.3 用户应当尊重民宿房东和其他用户的权益。
                    </text>
                </view>
                
                <view class="section">
                    <text class="section-title">7. 免责声明</text>
                    <text class="section-content">
                        7.1 我们仅提供信息平台服务，不对民宿的实际情况承担责任。\n
                        7.2 因不可抗力因素导致的服务中断，我们不承担责任。\n
                        7.3 用户因使用本服务产生的纠纷，应当与相关方协商解决。
                    </text>
                </view>
                
                <view class="section">
                    <text class="section-title">8. 协议修改</text>
                    <text class="section-content">
                        我们有权根据业务发展需要修改本协议，修改后的协议将在平台上公布。用户继续使用服务即视为同意修改后的协议。
                    </text>
                </view>
            </view>
            
            <!-- 隐私协议内容 -->
            <view v-if="activeTab === 'privacy'" class="agreement-content">
                <view class="section">
                    <text class="section-title">1. 隐私政策概述</text>
                    <text class="section-content">
                        我们非常重视您的隐私保护。本隐私政策说明了我们如何收集、使用、存储和保护您的个人信息。请您仔细阅读本政策，以了解我们对您个人信息的处理方式。
                    </text>
                </view>
                
                <view class="section">
                    <text class="section-title">2. 信息收集</text>
                    <text class="section-content">
                        2.1 注册信息：包括您的姓名、手机号码、邮箱地址等。\n
                        2.2 预订信息：包括入住日期、房间类型、特殊需求等。\n
                        2.3 设备信息：包括设备型号、操作系统、IP地址等。\n
                        2.4 使用信息：包括浏览记录、搜索历史、操作日志等。
                    </text>
                </view>
                
                <view class="section">
                    <text class="section-title">3. 信息使用</text>
                    <text class="section-content">
                        3.1 提供服务：为您提供民宿预订、客户服务等功能。\n
                        3.2 改善服务：分析用户行为，优化产品功能和用户体验。\n
                        3.3 安全保障：防范欺诈行为，保护账户安全。\n
                        3.4 法律要求：配合监管部门的合法要求。
                    </text>
                </view>
                
                <view class="section">
                    <text class="section-title">4. 信息共享</text>
                    <text class="section-content">
                        4.1 我们不会向第三方出售您的个人信息。\n
                        4.2 在以下情况下，我们可能会共享您的信息：\n                        - 获得您的明确同意\n                        - 为完成预订服务的必要共享\n                        - 法律法规要求的情况\n
                        4.3 共享时我们会要求第三方采取相应的保密措施。
                    </text>
                </view>
                
                <view class="section">
                    <text class="section-title">5. 信息存储</text>
                    <text class="section-content">
                        5.1 我们将在中华人民共和国境内存储您的个人信息。\n
                        5.2 我们会采取合理的安全措施保护您的信息安全。\n
                        5.3 信息保存期限将根据法律要求和业务需要确定。
                    </text>
                </view>
                
                <view class="section">
                    <text class="section-title">6. 您的权利</text>
                    <text class="section-content">
                        6.1 访问权：您有权了解我们收集的您的个人信息。\n
                        6.2 更正权：您有权要求我们更正不准确的个人信息。\n
                        6.3 删除权：在特定情况下，您有权要求我们删除您的个人信息。\n
                        6.4 撤回同意：您有权撤回对个人信息处理的同意。
                    </text>
                </view>
                
                <view class="section">
                    <text class="section-title">7. 未成年人保护</text>
                    <text class="section-content">
                        我们非常重视未成年人的个人信息保护。如果您是未成年人，请在监护人的陪同下阅读本政策，并在监护人同意后使用我们的服务。
                    </text>
                </view>
                
                <view class="section">
                    <text class="section-title">8. 联系我们</text>
                    <text class="section-content">
                        如果您对本隐私政策有任何疑问或建议，或者需要行使您的权利，请通过以下方式联系我们：\n
                        邮箱：privacy@example.com\n
                        电话：400-123-4567\n
                        地址：北京市朝阳区xxx街道xxx号
                    </text>
                </view>
                
                <view class="section">
                    <text class="section-title">9. 政策更新</text>
                    <text class="section-content">
                        我们可能会不时更新本隐私政策。更新后的政策将在我们的平台上发布，并自发布之日起生效。建议您定期查看本政策的更新。
                    </text>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import customNavbar from '../../components/custom-navbar/index.vue';
// 类型定义
interface LoadOptions {
  [key: string]: any
}

interface ShareResult {
  title?: string
  path?: string
}

// 响应式数据
const activeTab = ref<'user' | 'privacy'>('user')
const contentHeight = ref<number>(200)
const tabsRef = ref<any>(null)

// 切换标签页
const switchTab = (tab: 'user' | 'privacy'): void => {
  activeTab.value = tab
}

// 计算内容区域高度
const calculateContentHeight = async (): Promise<void> => {
  try {
    // 从localStorage获取导航栏高度(px)
    const navHeight = uni.getStorageSync('navHeight') || 44
    // 获取窗口信息
    const windowInfo = await uni.getWindowInfo()
    const windowHeight = windowInfo.windowHeight // 直接使用px
    // 获取tabs元素高度
    let tabsHeight = 48 // 默认高度(px)
      const query = uni.createSelectorQuery()
      query.select('.tabs').boundingClientRect((data: any) => {
        if (data) {
          tabsHeight = data.height // 直接使用px
        }
        // 计算内容区域高度
        contentHeight.value = windowHeight - navHeight - tabsHeight // 减去安全边距(px)
      })
      query.exec()
    
  } catch (error) {
    console.error('计算高度失败:', error)
    contentHeight.value = 200
  }
}

// 生命周期函数--监听页面加载
const onPageLoad = (options: LoadOptions): void => {
  // 页面加载逻辑
}

// 生命周期函数--监听页面初次渲染完成
const onPageReady = (): void => {
  // 页面渲染完成逻辑
}

// 生命周期函数--监听页面显示
const onPageShow = (): void => {
  // 页面显示逻辑
}

// 生命周期函数--监听页面隐藏
const onPageHide = (): void => {
  // 页面隐藏逻辑
}

// 生命周期函数--监听页面卸载
const onPageUnload = (): void => {
  // 页面卸载逻辑
}

// 页面相关事件处理函数--监听用户下拉动作
const onPagePullDownRefresh = (): void => {
  // 下拉刷新逻辑
}

// 页面上拉触底事件的处理函数
const onPageReachBottom = (): void => {
  // 上拉触底逻辑
}

// 用户点击右上角分享
const onPageShareAppMessage = (): ShareResult => {
  return {
    title: '服务协议',
    path: '/subpackage/more/more'
  }
}

// 页面挂载时执行
onMounted(() => {
  onPageLoad({})
  nextTick(() => {
    calculateContentHeight()
  })
})

</script>
<style>
.container {
  height: 100vh;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: #fff;
  padding: 32rpx;
  text-align: center;
  border-bottom: 2rpx solid #eee;
}

.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.tabs {
  display: flex;
  background-color: #fff;
  border-bottom: 2rpx solid #eee;
}

.tab-item {
  flex: 1;
  padding: 32rpx 0;
  text-align: center;
  font-size: 32rpx;
  color: #666;
  position: relative;
  transition: all 0.3s ease;
}

.tab-item.active {
  color: #007aff;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background-color: #007aff;
  border-radius: 2rpx;
}

.content {
  /* 高度通过JavaScript动态计算 */
  padding: 32rpx;
  box-sizing: border-box;
}

.agreement-content {
  /* background-color: #fff; */
  /* border-radius: 16rpx; */
  padding: 32rpx 0;
  box-sizing: border-box;
  /* box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); */
}

.section {
  margin-bottom: 48rpx;
}

.section:last-child {
  margin-bottom: 0;
}

.section-title {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 24rpx;
  line-height: 1.4;
}

.section-content {
  display: block;
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  white-space: pre-line;
}
</style>
